import {Component,useState} from 'react'
import { View, Text,Checkbox,Label,CheckboxGroup,Button,Input } from '@tarojs/components'
import ListBox from './list'

export default function  PageCheckbox () {
 
   let lista = [
      {
        value: '中国',
        text: '中国',
        checked: true,
        id:1,
      },
      {
        value: '美国',
        text: '美国',
        checked: false,
        id:2,
      }
    ]
  let [list,setList] = useState(lista)
  let change = (e) => {
    let idList = e.detail.value
    // if(Array.isArray(idList) && idList.length > 0) {

    // }
    console.log(idList)
  }
 
    return (
      <View className='page-body'>
        <View className='page-section'>
          <Text>默认样式</Text>
          <Checkbox value='选中' checked>选中</Checkbox>
          <Checkbox style='margin-left: 20rpx' value='未选中'>未选中</Checkbox>
        </View>
        <View className='page-section'>
          <Text>推荐展示样式</Text>
          <CheckboxGroup onChange={change}>
            {list.map((item, i) => {
              return (
                <Label className='checkbox-list__label' for={i} key={i}>
                  <Checkbox  className='checkbox-list__checkbox' value={item.id} checked={item.checked}></Checkbox>
                </Label>
              )
            })}
          </CheckboxGroup>
          <ListBox />
        </View>
      </View>
    )
 
}